{{HTML::script('js/plugins/jquery.min.js')}}
{{HTML::script('js/jquery-ui.min.js')}}
{{HTML::style('css/jquery-ui.css')}}
{{HTML::style('css/jquery-ui.min.css')}}
{{HTML::style('css/jquery-ui.structure.css')}}
{{HTML::style('css/jquery-ui.structure.min.css')}}
{{HTML::style('css/jquery-ui.theme.css')}}
{{HTML::style('css/jquery-ui.theme.min.css')}}
<div id="buttonBar">
	<div class="col-3 text-left pull-left">
		Font-size: <span class="font-size">120</span><br />
		<div id="slider"></div>
	</div>
	<div class="col-3 text-left pull-left">
		Canh lề trên <br />
		<div id="slider2"></div>
	</div>
	<div class="col-4 text-right pull-right">
		<button id="print">In hóa đơn</button>
		<button id="close">Đóng</button>
	</div>
</div>
<div id="printarea" class="row">
	{{(isset($customer->address_print)) ? $customer->address_print : ''}}
</div>
<script type="text/javascript">
$(document).ready(function() {
	$("button#print").click(function(event) {
		/* Act on the event */
		window.print();
	});

	$("#slider").slider({
		min: 60,
		max: 200,
		value: 120,
		step: 2,
		slide: function(event, ui){
			$("div#printarea").css('font-size', ui.value);
			$("span.font-size").text(ui.value);
		}
	});

	$("#slider2").slider({
		min: 60,
		max: 600,
		value: 60,
		step: 10,
		slide: function(event, ui){
			$("div#printarea").css('padding-top', ui.value);
		}
	});

	$("button#close").click(function(event) {
		/* Act on the event */
		window.history.back();
	});
});
</script>
<style type="text/css">
.col-3{
	width: 30%;
}

.col-4{
	width: 40%;
}

.col-5{
	width: 50%;
}

.pull-left{
	float: left;
}

.pull-right{
	float: right;
}

.text-left{
	text-align: left;
}

.text-right{
	text-align: right;
}

.text-top{
	vertical-align: top;
}

#buttonBar{
	position: fixed;
	width: 800px;
	height: 50px;
	background-color: #e9e9e9;
	margin: auto;
	padding-top: 5px;
	top: 0;
	left: 10%;
	right: 10%;
	opacity: 0.7;
}

#buttonBar #slider, #buttonBar #slider2{
	width: 200px;
	font-size: 10px;
	float: left;
	margin-top: 10px;
}

#printarea{
	padding-top: 60px;
	width: 800px;
	margin: auto;
	text-align: center;
	text-transform: uppercase;
	font-size: 120px;
}

#printarea p{
	margin: 0;
}

@media print{
	#buttonBar{
		display: none;
	}

	#printarea{
		padding-top: 0;
	}
}
</style>